import React, { PropTypes } from 'react'

import { Form, Button, Row, Col,DatePicker, Radio} from 'antd'
const echarts = require('echarts');

class chartHour extends React.Component {
  constructor (props) {
    super(props)

  }
  legend(){
    return ["CO","NO2","SO2","O3","PM2.5","PM10"]
  }
  xAxis(){
    let array=[];
    if(this.props.dataSource.list!=undefined){
        this.props.dataSource.list.map(function(item){
            array=array.concat(item.timepoint)
        })
    }

    return array
  }
  series(){

    let co={
        name:'CO',
        type:'line',
        yAxisIndex:1,
        data:[]
    };
    let no2={
        name:'NO2',
        type:'line',
        stack: 'no2',
        data:[]
    };
    let so2={
        name:'SO2',
        type:'line',
        stack: 'so2',
        data:[]
    };
    let o3={
        name:'O3',
        type:'line',
        stack: 'o3',
        data:[]
    };
    let pm25={
        name:'PM2.5',
        type:'line',
        stack: 'pm25',
        data:[]
    };
    let pm10={
        name:'PM10',
        type:'line',
        stack: 'pm10',
        data:[]

    };
    if(this.props.dataSource.list!=undefined){
        this.props.dataSource.list.map(function(item){
            co.data=co.data.concat(item.co.toFixed(2));
            no2.data=no2.data.concat(parseInt(item.no2));
            so2.data=so2.data.concat(parseInt(item.so2));
            o3.data=o3.data.concat(parseInt(item.o3));
            pm25.data=pm25.data.concat(parseInt(item.pm25));
            pm10.data=pm10.data.concat(parseInt(item.pm10))
        })
    }

    return [co,no2,so2,o3,pm25,pm10]
  }
  initEcharts(){
    // 基于准备好的dom，初始化echarts实例
    const myChart = echarts.init(document.getElementById('charts'));

    const option = {

            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data:this.legend()
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: this.xAxis()
            },
            yAxis: [
                 {
                    name: '单位(μg/m³)',
                    type: 'value',
                },
                {
                    name: 'CO单位(mg/m³)',
                    type: 'value'
                }
            ],
            series: this.series()
        };
    // 绘制图表
    
    myChart.setOption(option);

  }
  shouldComponentUpdate(nextState,nextProps){
      return true
  }
  componentDidUpdate(){
        if(this.props.dataSource.list!=undefined&&this.props.dataSource.list.length>0){
            this.initEcharts()
        }
  }
  componentDidMount(){

      window.requestAnimationFrame(function() {
          if(this.props.dataSource.list!=undefined&&this.props.dataSource.list.length>0){
            this.initEcharts()
          }
      }.bind(this))
  }
  render(){

    if(this.props.dataSource.list!=undefined&&this.props.dataSource.list.length==0){
     return (<Row gutter={24}></Row>)
    }
    return (
    <div>
 
        <Row gutter={24}>
          <div id='charts' style={{width:'100%',height:'250px'}}></div>
        </Row>

    </div>
    )
  }
}



chartHour.propTypes = {

};

export default chartHour
